<template>
  <div class="query">
    <div class="query__title">
      <img src="/images/logo-active.png"
           alt=""
           width="80">
      授权商用企业查询</div>
    <div class="query__search">
      <el-input placeholder="输入查询的公司名称或授权编号"
                v-model="value">
        <el-button type="primary"
                   slot="append"
                   @click="handleSubmit">查询</el-button>
      </el-input>
    </div>
    <div class="query__content"
         v-if="!validatenull(list)">
      <el-card class="query__text"
               v-for="(obj,index) in list"
               :key="index">
        <h3 slot="header">{{obj.cym || obj.mc}}</h3>
        <p>授权编号：{{obj.compid}}</p>
        <p>授权日期：{{obj.datetime}}</p>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      value: '',
      baseList: [],
    }
  },
  created () {
    this.getList();
  },
  computed: {
    list () {
      if (this.validatenull(this.value)) {
        return this.baseList;
      } else if (this.value.includes('A') || this.value.includes('V')) {
        return this.baseList.filter(ele => ele.compid.includes(this.value))
      } else {
        return this.baseList.filter(ele => ele.mc.includes(this.value))
      }
    }
  },
  methods: {
    getList () {
      const query = this.Bmob.Query("ticket");
      query.limit(1000);
      query.find().then(res => {
        this.baseList = res.sort(function (x, y) {
          if (x.compid < y.compid) {
            return -1;
          } else if (x.compid > y.compid) {
            return 1;
          } else {
            return 0;
          }
        });
        this.baseList = this.baseList.filter(ele => {
          return ele.compid
        })
      });
    }
  }
};
</script>

<style lang="scss">
.query {
  padding-top: 150px;
  min-height: 500px;
  height: auto;
  &__title {
    width: 100%;
    font-size: 42px;
    text-align: center;
    font-weight: 600;
    img {
      margin-right: 5px;
      vertical-align: bottom;
    }
  }
  &__search {
    width: 600px;
    margin: 60px auto 0 auto;
  }
  &__content {
    width: 1200px;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  &__text {
    box-sizing: border-box;
    margin: 15px 10px 0 10px;
    width: 48%;
    p {
      line-height: 30px;
    }
  }
}
</style>
